<template>
<!--使用v-for 遍历集合数组  -->
  <div>
    <template v-for="menu in menuList">
<!--   el-submenu 子菜单   -->
      <el-submenu :disabled="menu.disabled" v-if="menu.children.length>0"
      :index="menu.id+'' " :key="menu.id+''">
        <template slot="title" style="padding-left: 10px">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.menuName}}</span>
        </template>
<!--   自调用函数： 自己调用自己     -->
        <MenuTree :menuList="menu.children"></MenuTree>
      </el-submenu>
      <el-menu-item
        v-else
        :disabled="menu.disabled"
        :index="menu.id+''"
        :key="menu.id+''"
        :route="menu.url"
        @click="savePath(menu.url)"
        style="padding-left: 50px;"
        >
        <i :class="menu.icon"></i>
        <span slot="title">{{menu.menuName}}</span>
      </el-menu-item>

    </template>
  </div>

</template>

<script>
export default {
  name: "MenuTree",
  // 接收父组件传过来的值
}
</script>

<style scoped>
/* 当菜单水平缩进的时候，只显示*/
</style>
